<template>
	<view class="bz p-2">
		<view class="bz p-2 bg-white b-radius2">
			<view class="d-flex flex-nowrap a-center j-sb mt-2">
				<view class="d-flex flex-nowrap a-center">
					<image src="/static/user/17.png" class="icon" mode=""></image>
					<view class="header_title">优享卡</view>
				</view>
				<view class="tag">开通优享卡立享三大权益</view>
			</view>
			<view class="py-4 d-flex flex-nowrap a-center j-sb">
				<image src="/static/user/16.png" class="tagIcon" mode=""></image>
				<image src="/static/user/5.png" class="tagIcon" mode=""></image>
			</view>
			<view class="d-flex flex-nowrap a-center">
				<view class="list">
					<image src="/static/user/6.png" class="tag_icon" mode=""></image>
					<view class="tag_des">积分商城特权</view>
				</view>
				<view class="list">
					<image src="/static/user/13.png" class="tag_icon" mode=""></image>
					<view class="tag_des">生日积分翻倍</view>
				</view>
				<view class="list">
					<image src="/static/user/15.png" class="tag_icon" mode=""></image>
					<view class="tag_des">芯片优先尝鲜</view>
				</view>
			</view>
			
			<!-- 按钮 -->
			<view class="btn">惠享年卡 ￥99.00/年</view>
			<view class="btn">月付尝鲜 ￥9.00/月</view>
			
			<view class="py-3">
				<image src="/static/user/3.png" mode="widthFix" style="width: 100%;"></image>
			</view>
			
			<view class="goodWrap py-2">
				<view class="good_list py-2" v-for="(item,index) in 3" :key="index">
					<view class="d-flex flex-nowrap a-center">
						<view class="d-flex flex-nowrap a-center">
							<image src="/static/user/2.png" class="icon1" mode=""></image>
							<view class="header_title">储蓄卡</view>
						</view>
						<view class="tag1">最近支持门店</view>
					</view>
					<view class="py-1 d-flex flex-nowrap a-center">
						<image src="/static/user/12.png" class="imgs" mode="aspectFill"></image>
						<view class="flex-1 pl-2 d-flex flex-nowrap a-center">
							<view class="flex-1">
								<view class="shop">三元里泰宏店</view>
								<view class="lon">距我1.27km</view>
							</view>
							<image src="/static/user/7.png" class="pay_icon" mode=""></image>
						</view>
					</view>
					<view class="d-flex flex-nowrap a-center">
						<view class="address">广东市白云区皇家海军和低功耗说过的话</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.icon{
	width: 50rpx;
	height: 50rpx;
}
.icon1{
	width: 40rpx;
	height: 40rpx;
}
.imgs{
	width: 120rpx;
	height: 90rpx;
}
.address{
	font-size: 23rpx;
	color: #888;
}
.shop{
	font-size: 30rpx;
	color: #000;
}
.pay_icon{
	width: 150rpx;
	height: 50rpx;
}
.lon{
	font-size: 25rpx;
	color: #666;
	margin-top: 10rpx;
}
.tag1{
	font-size: 25rpx;
	color: #888;
	margin-left: 20rpx;
}
.header_title{
	font-size: 30rpx;
	color: #E9CA92;
	margin-left: 20rpx;
}
.goodWrap{
	
	// border-top: 1rpx solid #f8f8f8;
	.good_list{
		border-bottom: 1rpx solid #f8f8f8;
	}
}
.tag{
	background-color: #C2D0E1;
	font-size: 27rpx;
	height: 40rpx;
	line-height: 40rpx;
	padding: 0 30rpx;
	border-radius:20rpx;
	color: #555;
}
.tagIcon{
	width: 320rpx;
	height: 170rpx;
}
.list{
	flex:1;
	.tag_icon{
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
	}
	.tag_des{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 25rpx;
		color: #888;
		text-align: center;
	}
}
.btn{
	height: 78rpx;
	border-radius: 39rpx;
	line-height: 78rpx;
	border:1rpx solid #333;
	font-size: 28rpx;
	text-align: center;
	color: #333;
	margin-top: 20rpx;
}
</style>
